<template>
  <view class="page-container">
    <!-- 固定头部导航栏 -->
    <view class="fixed-header" :style="{ paddingTop: statusBarHeight + 'px' }">
		<text class="empty-text">暂无通知</text>
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view 
      class="scrollable-content"
      :style="{ top: `calc(${statusBarHeight}px + 88rpx)` }"
      scroll-y
    >
      <view class="content">
        <view class="notification-list" v-if="notifications.length">
          <!-- 这里放通知列表内容 -->
        </view>
        
        <!-- 空状态 -->
        <view class="empty" v-else>
          <text class="iconfont icon-notification empty-icon"></text>
        </view>
      </view>
    </scroll-view>

    <!-- 固定底部导航 -->
    <view class="fixed-footer">
      <view class="tab-bar">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index" 
          class="tab-item" 
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          <text class="iconfont" :class="tab.icon" />
          <text class="text">{{ tab.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { system } from '@/utils/system'

// 状态栏高度
const statusBarHeight = system.getStatusBarHeight()

// 通知列表
const notifications = ref([])

// 当前选中的标签页
const currentTab = ref(3)

// 底部导航配置
const tabs = [{
    text: '对话',
    icon: 'icon-message'
  },
  {
    text: '发现',
    icon: 'icon-search'
  },
  {
    text: '创建',
    icon: 'icon-add'
  },
  {
    text: '通知',
    icon: 'icon-notification'
  },
  {
    text: '我的',
    icon: 'icon-user'
  }
]

// 切换标签页
const switchTab = (index) => {
  const routes = [
    '/pages/index/index',
    '/pages/discover/discover',
    '/pages/create/create',
    '/pages/notification/notification',
    '/pages/my/my'
  ]
  uni.switchTab({
    url: routes[index]
  })
}
</script>

<style lang="scss">
.page-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;

  // 固定头部
  .fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
	.empty-text {
	  font-size: 28rpx;
	  color: #999;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

    .nav-bar {
      height: 88rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      border-bottom: 1px solid #f5f5f5;

      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
    }
  }

  // 空状态样式
  .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .empty-icon {
      font-size: 120rpx;
      color: #999;
    }


  }

  // 固定底部导航
  .fixed-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;

    .tab-bar {
      height: 110rpx;
      background: #fff;
      display: flex;
      align-items: center;
      border-top: 1rpx solid #eee;
      padding-bottom: env(safe-area-inset-bottom);

      .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #999;

        .iconfont {
          font-size: 48rpx;
          margin-bottom: 6rpx;
        }

        .text {
          font-size: 24rpx;
        }

        &.active {
          color: #007AFF;
        }
      }
    }
  }
}
</style>
